<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { DeleteData, GetData, GetDataDetail, PostAddComment, PutComment } from '@/api/modules/barrageManagement.ts'

const imgDomain = 'https://img1.eprhan.cc'

// 添加的表单
const addFrom = ref({
  avatar: '',
  comment: '',
  standby1: '',
  tag: 2,
})
const redactFrom = ref({
  id: '',
  avatar: '',
  comment: '',
  standby1: '1',
  tag: 2,
})
// 表格的列表
const dataList: any = ref([])

// 列表加载的开关
const loading = ref(true)
// 数据总数
const total = ref(0)
let PageSize = 20
let PageNum = 1
// 控制对话框的开关
const addDialog = ref(false)
const redactDialog = ref(false)

// 获取数据
function GetDataList(PageIndex: number = 1, PageSize: number = 20) {
  const params = {
    PageIndex,
    PageSize,
  }
  GetData(params).then((res: any) => {
    if (res.statusCode === 200) {
      dataList.value = res.data.items
      total.value = res.data.total
      loading.value = false
    }
  })
}

// 添加
function addEvent() {
  addFrom.value = {
    avatar: '',
    comment: '',
    standby1: '1',
    tag: 2,
  }
  addDialog.value = true
}
// 新增
async function AddComment() {
  await PostAddComment(addFrom.value).then((res: any) => {
    if (res.data) {
      ElMessage.success('添加成功')
      addDialog.value = false
      GetDataList(PageNum, PageSize)
    }
    else {
      ElMessage.error(`添加失败。${res.errors}`)
    }
  })
}

// 图片上传回调
function handleUploadSuccess(key: string, url: string) {
  if (url) {
    if (key === 'redactFrom') {
      redactFrom.value.avatar = url
    }
    else if (key === 'addFrom') {
      addFrom.value.avatar = url
    }
    // ruleForm.value[key] = url
  }
}

// 复制
function Copy(message: any) {
  delete message.id
  PostAddComment(message).then((res: any) => {
    if (res.data) {
      ElMessage.success('复制成功')
      addDialog.value = false
      GetDataList(PageNum, PageSize)
    }
    else {
      ElMessage.error(`复制失败。${res.errors}`)
    }
  })
}

// 编辑
function Redact(message: any) {
  GetDataDetail(message.id).then((res: any) => {
    // console.log(res)
    if (res.statusCode === 200) {
      redactFrom.value = res.data
    }
  })
  redactDialog.value = true
}
function redactComment() {
  PutComment(redactFrom.value).then((res: any) => {
    if (res.data) {
      ElMessage.success('修改成功')
      redactDialog.value = false
      GetDataList(PageNum, PageSize)
    }
    else {
      ElMessage.error(`修改失败。${res.errors}`)
    }
  })
}
// 删除
function Delete(id: number) {
  loading.value = true
  DeleteData(id).then((res) => {
    if (res.data) {
      ElMessage.success('删除成功')
      GetDataList(PageNum, PageSize)
    }
    else {
      ElMessage.error(`删除失败。`)
    }
    loading.value = false
  })
}

// 翻页
function handleSizeChange(val: number) {
  GetDataList(1, val)
  PageSize = val
}
function handleCurrentChange(val: number) {
  GetDataList(val, PageSize)
  PageNum = val
}

onMounted(() => {
  GetDataList()
})
</script>

<template>
  <div>
    <PageMain>
      <SearchBar :show-toggle="false">
        <div style="text-align: right;">
          <el-button type="success" @click="addEvent">
            添加
          </el-button>
        </div>
      </SearchBar>
      <ElDivider border-style="dashed" />
      <el-table v-loading="loading" :data="dataList" stripe style="width: 100%;" border>
        <el-table-column align="center" prop="id" label="ID" width="140" />
        <el-table-column align="center" prop="avatar" label="头像" width="160">
          <template #default="scope">
            <el-avatar shape="square" :size="60" :src="imgDomain + scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column header-align="center" prop="comment" label="内容" />
        <el-table-column align="center" label="操作" fixed="right" width="260">
          <template #default="scope">
            <el-button type="success" @click="Copy(scope.row)">
              复制
            </el-button>
            <el-button type="primary" @click="Redact(scope.row)">
              编辑
            </el-button>
            <el-popconfirm title="你确定要删除吗?" @confirm="Delete(scope.row.id)">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 10px;" />
      <el-pagination
        :default-page-size="20"
        :page-sizes="[5, 10, 20, 50, 100]"
        size="default"
        :background="false"
        layout="total, sizes, ->, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </PageMain>
    <el-dialog v-model="addDialog" title="添加" width="500" center top="240px" :close-on-click-modal="false" :destroy-on-close="true">
      <div class="dialog-from">
        <div>
          <span>内容：</span>
          <el-input v-model="addFrom.comment" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 240px;" placeholder="请输入内容" clearable type="textarea" />
        </div>
        <div>
          <span>头像：</span>
          <ImageUpload :size="1" :width="100" :height="100" :url="addFrom.avatar" :ext="['png', 'jpg']" @on-success="(imgUrl) => handleUploadSuccess('addFrom', imgUrl)" />
        </div>
      </div>
      <template #footer>
        <el-button @click="addDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="AddComment">
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="redactDialog" title="编辑" width="500" center top="240px" :close-on-click-modal="false">
      <div class="dialog-from">
        <div>
          <span>内容：</span>
          <el-input v-model="redactFrom.comment" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 240px;" placeholder="请输入内容" clearable type="textarea" />
        </div>
        <div>
          <span>头像：</span>
          <ImageUpload :size="1" :width="100" :height="100" :url="redactFrom.avatar" :ext="['png', 'jpg']" @on-success="(imgUrl) => handleUploadSuccess('redactFrom', imgUrl)" />
        </div>
      </div>
      <template #footer>
        <el-button @click="redactDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="redactComment">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.dialog-from {
  >div {
    display: grid;
    grid-template-columns: repeat(1, 1fr 4fr);
    grid-gap: 20px;
    padding: 10px;

    span {
      padding-top: 9px;
      text-align: right;
    }
  }
}
</style>
